<template>
  <div>
    <FontHeader style="background: #192332; position: relative;"></FontHeader>
    <div class="container">
      <div class="content">
        <div class="main" style="">
          <div class="headslider slider-auto" style=";height: 257px;width: 100%" id="indexTopSlide" data-ride="carousel" data-loop="true">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div v-for="item in banner" :key="item.id" class="swiper-slide">
                  <img :src="item.image" class="swiperbanner" style="border-radius: 8px">
                </div>
              </div>
              <!-- 如果需要分页器 -->
              <div class="swiper-pagination"></div>
              <!-- 如果需要导航按钮 -->
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
              <!-- 如果需要滚动条 -->
              <div class="swiper-scrollbar"></div>
            </div>
          </div>
          <div class="commentList">
            <div class="title">
              <img src="http://43.138.158.143/inner/images/community_comment.png" class="commentImage">
<!--              <img src="../assets/images/community_comment.png" class="commentImage">-->
              <span class="commentWord"> 社区评论 </span>
            </div>
            <div class="list">
              <div class="listComment">
                <div v-for="comment in comments" :key="comment.commentId" class="commentLists">
                  <div class="commentHeader">
                    <div class="commentImg">
                      <img :src="'http://43.138.158.143/inner/images/avatar/'+Math.floor(Math.random()*10)+'.png'">
                    </div>
                    <div class="commentUser">
                      {{comment.userName}}
                      <span class="time">{{comment.publishDate.substring(0,10)}}</span>
                    </div>
                    <div class="commentMovieInfo">
                      <router-link :to="{path:'/detail',query:{movieId:comment.toId}}">
                        <span>
                          <img :src="'http://43.138.158.143/posters/'+comment.toId+'.jpg'">
                          {{comment.movieName}}
                        </span>
                      </router-link>
                    </div>
                  </div>
                  <div class="commentTitle">
                    <span>{{comment.commentTitle}}</span>
                  </div>
                  <p><span>{{comment.commentInfo}}</span></p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="aside">
          <div class="userListWrapper">
            <div class="userList">
              <div class="userListHeader">
                <span class="header_title">热门用户</span>
              </div>
              <div class="userBox" v-for="user in hotUsers" :key="user.userId">
                <div class="userInfo">
                  <div style="float:left;">
                    <img :src="'http://43.138.158.143/inner/images/avatar/'+Math.floor(Math.random()*10)+'.png'" style="height: 40px;weight:40px;border-radius: 20px ">
                  </div>
                  <div style="float:left;margin-top: 10px">
                    <span style="margin-left: 20px;margin-bottom: 30px">{{user.userName}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="clear: both"></div>
      </div>
    </div>
    <div style="margin: 0 auto;width: 600px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import FontHeader from "@/components/FontHeader";
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
  components: {FontHeader},
  name: "Community",
  data(){
    return{
      page: 1,
      pageSize: 5,
      pageNum: 1,
      total: 0,
      comments:{},
      hotUsers:{},
      banner: [
        {
          "id": "1",
          "image": "http://43.138.158.143/inner/images/r1.jpg"
          // "image": require("../assets/images/r2.jpg")
        },
        {
          "id": "2",
          "image": "http://43.138.158.143/inner/images/r2.jpg"
        },
        {
          "id": "3",
          "image": "http://43.138.158.143/inner/images/r3.jpg"
        },
        {
          "id": "4",
          "image": "http://43.138.158.143/inner/images/r4.jpg"
        }
      ],
    }
  },
  created() {
    this.searchAllComments(this.page,this.pageSize)
    this.selectHotUsers()
  },
  methods:{
    searchAllComments(page,pageSize){
      this.request.get('/comment/visitor/getAllComments',{
        params:{
          page: page,
          pageSize: pageSize,
        }
      }).then(res=>{
        if (res.code == 0){
          this.comments = res.data.commentDetailDtoList
          this.total = res.data.num
        }else{
          this.$message.error(res.message)
        }
      })
    },
    selectHotUsers(){
      this.request.get('/user/visitor/getHotUsers').then(res=>{
        if (res.code == 0){
          this.hotUsers = res.data
        }else{
          this.$message.error(res.message)
        }
      })
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.searchAllComments(this.page,pageSize)

    },
    handleCurrentChange(pageNum){
      this.pageNum = pageNum
      this.searchAllComments(pageNum,this.pageSize)
    },
  },

  mounted() {
    new Swiper('.swiper-container', {
      // direction: 'vertical', // 垂直切换选项，默认横向
      loop: true, // 循环模式选项
      autoplay:{
        delay:2000,
        disableOnInteraction: false,
      },
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    })
  }
}
</script>

<style scoped>

</style>